<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>产品月销量</title>
   <!-- 设计表格的表现样式 -->
<style>
  table {
    width: 70%;
    margin: auto;
    table-layout: fixed;
    border-collapse: collapse;
    caption-side: top;
  }
  caption{
    font-weight: bold;
    font-size: 2.5rem;
  }
  th, td {
    border: 3px solid pink;
    padding: 8px;
    text-align: center;
  }
   tfoot {
    font-weight: bold ;
    background-color:  #564aff;
  }
</style>
</head>
<body>
<!-- HTML表格内容 -->
<table>
  <caption>
    产品月销量
  </caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>产品名称</th>
      <th>销量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2021090901</td>
      <td>马克杯</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>2021090901</td>
      <td>啤酒杯</td>
      <td>5200</td>
    </tr>
    <tr>
      <td>2021090901</td>
      <td>搪瓷杯</td>
      <td>3500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合计</td>
      <td>13700</td>
    </tr>
  </tfoot> 
</table>
</body>
</html>